<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
  <meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
   <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
  <!-- ico图标的引入 -->
  <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
  <!-- 先引入我们的初始化css -->
  <link rel="stylesheet" href="css/normalize.css">
  <!-- 再引入我们的 公共样式文件 -->
  <link rel="stylesheet" href="css/common.css">
  <!-- 再引入我们的 首页样式文件 -->
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!-- 整个顶部盒子start -->
  <div class="nav-top">
      <!-- 快捷导航模块开始 -->
      <div class="shortcut">
         <div class="w">
             <div class="shortcut-l fl">
               <ul>
                 <li>品优购欢迎您！ </li>
                 <li> 
                     &nbsp; 
                     <a href="#">请登录</a>  
                     &nbsp; 
                     <a href="register.html" target="_blank" class="style-red">免费注册</a>  
                 </li>
               </ul>
             </div>
             <div class="shortcut-r fr">
                 <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li class="cw-icon"><a href="#">我的品优购</a> <i  class="arrow"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li class="cw-icon"><a href="#">关注品优购</a> <i class="arrow"></i></li>
                    <li class="spacer"></li>
                    <li class="cw-icon"><a href="#">客户服务</a>  <i  class="arrow"></i></li>
                    <li class="spacer"></li>
                    <li class="cw-icon"><a href="#">网站导航</a>  <i  class="arrow"></i></li>
                 </ul>
             </div>
         </div>        
      </div>
      <!-- 快捷导航模块结束 -->
      <!-- 头部 模块start -->
      <div class="header w">
          <!-- logo -->
          <div class="logo">
             <h1>
                <a href="index.html" title="品优购网">品优购网</a>
             </h1>
          </div>

          <!-- search -->
          <div class="search">
              <form action="">
                <input type="text" placeholder="语言开发">
                <button></button>
              </form>
          </div>

          <!-- hotwords -->
          <div class="hotwords">
            <a href="#" class="style-red">优惠购首发</a>    
            <a href="#">亿元优惠</a>    
            <a href="#">9.9元团购</a>    
            <a href="#">美满99减30</a>    
            <a href="#">办公用品</a>    
            <a href="#">电脑</a>    
            <a href="#">通信</a>                           
          </div>
          <!-- shopcar -->
          <div class="shopcar">
               <i class="icomoon car"></i>
               <a href="#">我的购物车</a>
               <i class="icomoon arr"></i> 
               <i class="count">8</i>
          </div>
      </div>
      <!-- nav部分 -->
      <div class="nav w">
          <!-- 下拉菜单 -->
          <div class="dropdown fl">
             <div class="dt">
                <h3>全部商品分类</h3>
             </div>
             <div class="dd">
                <ul>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                  <li class="cate_menu_item"><a href="#">家居、家具、家装、厨具 <span class="icomoon fr"></span></a></li>
                </ul>
             </div>
          </div>
          <!-- nav-group  导航分组 -->
          <div class="nav-group fl">
             <ul>
               <li class="nav-group-item"><a href="#">服装城</a></li>
               <li class="nav-group-item"><a href="#">美妆馆</a></li>
               <li class="nav-group-item"><a href="#">团购</a></li>
               <li class="nav-group-item"><a href="#">传智超市</a></li>
               <li class="nav-group-item"><a href="#">全球购</a></li>
               <li class="nav-group-item">
                  <a href="#">海鲜</a>
                  <i class="dragon">龙抬头</i>
              </li>
               <li class="nav-group-item"><a href="#">拍卖</a></li>
               <li class="nav-group-item"><a href="#">有趣</a></li>
             </ul>
          </div>
      </div>
      <!-- 头部 模块start -->        
  </div>
  <!-- 整个顶部盒子end -->
  <!-- 主体盒子开始 -->
  <div class="w">
      <div class="main">
          <!-- 轮播图 焦点图 -->
          <div class="focus fl">
              <ul>
                <li><a href="#"><img src="upload/banner.jpg" alt=""></a></li>
              </ul>
              <button class="focus-prev"></button>
              <button class="focus-next"></button>
              <!-- 翻页小圆点 -->
              <ol class="pager">
                <li class="pager-item"></li>
                <li class="pager-item"></li>
                <li class="pager-item"></li>
                <li class="pager-item current"></li>
                <li class="pager-item"></li>
                <li class="pager-item"></li>
              </ol>
          </div>
          <!-- 快报模块 -->
          <div class="newsflash fr">
            <div class="news">
              <div class="news-hd">
                 <h5 class="fl">品优购快报</h5>
                 <a href="#" class="fr">更多 &gt; </a>
              </div>
              <div class="news-bd">
                 <ul>
                   <li><a href="#"><strong>[特惠]</strong> 荣耀超级新品日 钜惠来袭</a></li>
                   <li><a href="#"><strong>[特惠]</strong> 荣耀超级新品日 钜惠来袭</a></li>
                   <li><a href="#"><strong>[特惠]</strong> 荣耀超级新品日 钜惠来袭</a></li>
                   <li><a href="#"><strong>[特惠]</strong> 荣耀超级新品日 钜惠来袭</a></li>
                   <li><a href="#"><strong>[特惠]</strong> 荣耀超级新品日 钜惠来袭</a></li>
                 </ul>
              </div>
            </div>
            <div class="lifeservice">
               <ul>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li class="game">
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
                 <li>
                   <a href="#"><i class="icon"></i><p>话费</p></a>
                   
                 </li>
               </ul>
            </div>
            <div class="ad">
              <img src="upload/ad.jpg" alt="">
            </div>
          </div>
      </div>
  </div>
  <!-- 主体盒子结束 --> 

 <!-- show模块展示专区 -->
 <div class="show">
   <div class="recommend w">
      <div class="time fl">
         <img src="img/clock.png" alt="">
         <h3>今日推荐</h3>
      </div>
      <div class="recommend-r fl">
         <ul>
           <li>
             <a href="list.html">
               <img src="upload/re-img1.jpg" alt="">
             </a>
           </li>
           <li>
             <a href="list.html">
               <img src="upload/re-img1.jpg" alt="">
             </a>
           </li>
           <li>
             <a href="list.html">
               <img src="upload/re-img1.jpg" alt="">
             </a>
           </li>
           <li class="last">
             <a href="list.html">
               <img src="upload/re-img1.jpg" alt="">
             </a>
           </li>
  
         </ul>
      </div>
   </div>
 </div>
 <!-- show模块展示专区end -->

 <!-- 楼层去  电梯导航用的  start-->
<div class="floor">
   <div class="w">
       <div class="floor-hd">
          <h3>家用电器</h3>
          <div class="tab-list">
             <ul>
                <!-- 因为我们触发的是li事件  -->
                <li ><a href="#">热门</a> |</li>
                <li><a href="#">大家电</a> |</li>
                <li><a href="#">生活电器</a>|</li>
                <li class="current"><a href="#">厨房电器</a>|</li>
                <li><a href="#">个护健康</a>|</li>
                <li><a href="#">应季电器</a>|</li>
                <li><a href="#">空气/净水</a>|</li>
                <li><a href="#">新奇特</a>|</li>
                <li><a href="#">高端电器</a></li>
             </ul>
          </div>
       </div>
       <div class="floor-bd">
         <!-- tab-content这个盒子要有 -->
          <div class="tab-content">
             <div class="row-210 fl">
                 <div class="row-210-top clearfix">
                   <ul>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                   </ul>
                 </div>
                 <div class="row-210-bottom">
                   <a href="#"><img src="upload/floor-1-1.png" alt=""></a>
                 </div>
             </div>
             <div class="row-330 fl">
                <ul>
                  <li><a href=""><img src="upload/floor-1-b01.png" alt=""></a></li>
                </ul>

             </div>
             <div class="row-220 fl">
                 <div class="tab-content-top">
                   <a href="#"><img src="upload/floor-1-2.png" alt=""></a>
                 </div>
                 <div class="tab-content-bottom">
                    <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                 </div>
             </div>
             <div class="row-220 fl">
                <a href="#"><img src="upload/floor-1-4.png" alt=""></a>
             </div>
             <div class="row-220 fl">
                 <div class="tab-content-top">
                   <a href="#"><img src="upload/floor-1-2.png" alt=""></a>
                 </div>
                 <div class="tab-content-bottom">
                    <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                 </div>

             </div>
          </div>
       </div>

   </div>

   <div class="w">
       <div class="floor-hd">
          <h3>手机腾讯</h3>
          <div class="tab-list">
             <ul>
                <!-- 因为我们触发的是li事件  -->
                <li ><a href="#">热门</a> |</li>
                <li><a href="#">大家电</a> |</li>
                <li><a href="#">生活电器</a>|</li>
                <li class="current"><a href="#">厨房电器</a>|</li>
                <li><a href="#">个护健康</a>|</li>
                <li><a href="#">应季电器</a>|</li>
                <li><a href="#">空气/净水</a>|</li>
                <li><a href="#">新奇特</a>|</li>
                <li><a href="#">高端电器</a></li>
             </ul>
          </div>
       </div>
       <div class="floor-bd">
         <!-- tab-content这个盒子要有 -->
          <div class="tab-content">
             <div class="row-210 fl">
                 <div class="row-210-top clearfix">
                   <ul>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                     <li><a href="#">节能补贴</a></li>
                   </ul>
                 </div>
                 <div class="row-210-bottom">
                   <a href="#"><img src="upload/floor-1-1.png" alt=""></a>
                 </div>
             </div>
             <div class="row-330 fl">
                <ul>
                  <li><a href=""><img src="upload/floor-1-b01.png" alt=""></a></li>
                </ul>

             </div>
             <div class="row-220 fl">
                 <div class="tab-content-top">
                   <a href="#"><img src="upload/floor-1-2.png" alt=""></a>
                 </div>
                 <div class="tab-content-bottom">
                    <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                 </div>
             </div>
             <div class="row-220 fl">
                <a href="#"><img src="upload/floor-1-4.png" alt=""></a>
             </div>
             <div class="row-220 fl">
                 <div class="tab-content-top">
                   <a href="#"><img src="upload/floor-1-2.png" alt=""></a>
                 </div>
                 <div class="tab-content-bottom">
                    <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                 </div>

             </div>
          </div>
       </div>

   </div>
</div>






  <!-- 整个底部盒子start -->

  <div class="footer">
      <div class="w">
            <!-- 服务模块 -->
            <div class="mod_service">
               <ul>
                 <li class="mod_service_item">
                    <i class="mod_service_zheng fl sprite1"></i>
                    <div class="mod_service_tit fl">
                        <h5>正品保障</h5>
                        <p>正品保障, 提供发票</p>
                    </div>
                 </li>
                 <li class="mod_service_item">
                    <i class="mod_service_ji fl sprite1"></i>
                    <div class="mod_service_tit fl">
                        <h5>极速物流</h5>
                        <p>正品保障, 提供发票</p>
                    </div>
                 </li>
                 <li class="mod_service_item">
                    <i class="mod_service_zheng fl sprite1"></i>
                    <div class="mod_service_tit fl">
                        <h5>正品保障</h5>
                        <p>正品保障, 提供发票</p>
                    </div>
                 </li>
                 <li class="mod_service_item">
                    <i class="mod_service_zheng fl sprite1"></i>
                    <div class="mod_service_tit fl">
                        <h5>正品保障</h5>
                        <p>正品保障, 提供发票</p>
                    </div>
                 </li>
                 <li class="mod_service_item">
                    <i class="mod_service_zheng fl sprite1"></i>
                    <div class="mod_service_tit fl">
                        <h5>正品保障</h5>
                        <p>正品保障, 提供发票</p>
                    </div>
                 </li>
                
               </ul>
            </div>
            <!-- 帮助模块 -->
            <div class="mod_help">
                <dl class="mod_help_list">
                  <dt class="mod_help_title">购物指南</dt>
                  <dd><a href="#">购物流程</a></dd>
                  <dd><a href="#">会员介绍</a></dd>
                  <dd><a href="#">生活旅行/团购</a></dd>
                  <dd><a href="#">常见问题</a></dd>
                  <dd><a href="#">大家电</a></dd>
                  <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl class="mod_help_list">
                  <dt class="mod_help_title">购物指南</dt>
                  <dd><a href="#">购物流程</a></dd>
                  <dd><a href="#">会员介绍</a></dd>
                  <dd><a href="#">生活旅行/团购</a></dd>
                  <dd><a href="#">常见问题</a></dd>
                  <dd><a href="#">大家电</a></dd>
                  <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl class="mod_help_list">
                  <dt class="mod_help_title">购物指南</dt>
                  <dd><a href="#">购物流程</a></dd>
                  <dd><a href="#">会员介绍</a></dd>
                  <dd><a href="#">生活旅行/团购</a></dd>
                  <dd><a href="#">常见问题</a></dd>
                  <dd><a href="#">大家电</a></dd>
                  <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl class="mod_help_list">
                  <dt class="mod_help_title">购物指南</dt>
                  <dd><a href="#">购物流程</a></dd>
                  <dd><a href="#">会员介绍</a></dd>
                  <dd><a href="#">生活旅行/团购</a></dd>
                  <dd><a href="#">常见问题</a></dd>
                  <dd><a href="#">大家电</a></dd>
                  <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl class="mod_help_list">
                  <dt class="mod_help_title">购物指南</dt>
                  <dd><a href="#">购物流程</a></dd>
                  <dd><a href="#">会员介绍</a></dd>
                  <dd><a href="#">生活旅行/团购</a></dd>
                  <dd><a href="#">常见问题</a></dd>
                  <dd><a href="#">大家电</a></dd>
                  <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl class="mod_help_list">
                  <dt class="mod_help_title">购物指南</dt>
                  <dd class="erweima">
                    <img src="img/wx_cz.jpg" alt="">

                     品优购客户端
                  </dd>
                </dl>
            </div>
            <!-- 版权模块 -->
            <div class="mod_copyright">
              <div class="mod_copyright_links"> 
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">English Site</a>|
                <a href="#">Contact U</a></div>
              <p>
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702

              </p>
            </div>
      </div>
  </div>
 <!-- 整个底部盒子start -->
</body>

</html>
